.box{
    width: 200px;
    height: 200px;
    background-color: crimson;
    border-radius: 50%;
}
/*
CSSTransition动画的执行,需要依赖对应的class值
进入动画
xxx-enter
xxx-enter-active
xxx-enter-done
离开动画
xxx-exit 离开动画,点击按钮的时候触发,在动画执行的过程中保留,一般在 该class里面需要填写做动画的样式的初始值
xxx-exit-active 从开始到结束一直保留,一般填写动画的运动信息
xxx-exit-done
*/
.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity:0;
    transition: all 1s;
}
.fade-exit-done{
    opacity:0;
    display: none;
}
/*进入动画*/
.fade-enter{
    display: block;
    opacity: 0;
}
.fade-enter-active{
    opacity: 1;
    transition: all 1s;
}
.fade-enter-done{
    opacity: 1;
}